<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('销售报表')" />
  <!-- 引入 ECharts 库 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body class="gray-bg">
<div class="container-div">
  <div id="barChart" style="width: 100%; height: 400px;"></div>
  <div id="pieChart" style="width: 100%; height: 400px;"></div>
  <div id="lineChart" style="width: 100%; height: 400px;"></div>
</div>

<script>
  // 初始化 ECharts 实例
  var barChart = echarts.init(document.getElementById('barChart'));
  var pieChart = echarts.init(document.getElementById('pieChart'));
  var lineChart = echarts.init(document.getElementById('lineChart'));

  // 获取商品销售数量统计数据
  $.ajax({
    url: '/oc/report/goodsSalesQuantity',
    method: 'GET',
    success: function (data) {
      var goodsIds = [];
      var quantities = [];
      for (var goodsId in data) {
        goodsIds.push(goodsId);
        quantities.push(data[goodsId]);
      }

      // 配置柱状图选项
      var barOption = {
        xAxis: {
          type: 'category',
          data: goodsIds
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: quantities,
          type: 'bar'
        }]
      };

      // 使用配置项显示柱状图
      barChart.setOption(barOption);
    }
  });

  // 获取订单销售额统计数据
  $.ajax({
    url: '/oc/report/orderSalesAmount',
    method: 'GET',
    success: function (data) {
      var orderIds = [];
      var amounts = [];
      for (var orderId in data) {
        orderIds.push(orderId);
        amounts.push(data[orderId]);
      }

      // 配置饼状图选项
      var pieOption = {
        series: [{
          type: 'pie',
          radius: '50%',
          data: amounts.map(function (amount, index) {
            return {
              value: amount,
              name: orderIds[index]
            };
          })
        }]
      };

      // 使用配置项显示饼状图
      pieChart.setOption(pieOption);
    }
  });

  // 获取每日销售总额统计数据
  $.ajax({
    url: '/oc/report/dailySalesTotal',
    method: 'GET',
    success: function (data) {
      var dates = [];
      var totals = [];
      for (var date in data) {
        dates.push(date);
        totals.push(data[date]);
      }

      // 配置折线图选项
      var lineOption = {
        xAxis: {
          type: 'category',
          data: dates
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: totals,
          type: 'line'
        }]
      };

      // 使用配置项显示折线图
      lineChart.setOption(lineOption);
    }
  });
</script>
</body>
</html>